<template>
    <el-card class="box-card" shadow="hover">
          <el-table :data="booksList.list" stripe style="width: 100%">
                <el-table-column prop="id" label="标签ID" width="80" />
                <el-table-column prop="author" label="作者" width="180" />
                <el-table-column prop="classIfy" label="所属分类" />
                <el-table-column label="封面" width="180">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-image
                                style="width: 60px;height: 60px;marginRight: 5px;"
                                :src="scope.row.img"
                                :initial-index="4"
                                fit="fill"
                                />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="剩余量" />
                <el-table-column prop="publicAccounts" label="发布账号" />
                <el-table-column prop="time" width="240" label="发布时间" />
                <el-table-column label="借阅" width="240">
                    <template #default="scope">
                        <div style="display: flex; align-items: center">
                            <el-button
                                size="small"
                                type="primary"
                                 :icon="Plus" 
                                @click="delTagFun(scope.row.id)"
                                >借阅</el-button
                            >
                        </div>
                    </template>
                </el-table-column>
            </el-table>
              <div class="demo-pagination-block" style="marginTop: 20px;marginBottom: 40px;">
                <el-pagination
                v-model:currentPage="booksList.pageNumber"
                v-model:page-size="booksList.pageSize"
                :page-sizes="[10, 15, 20]"
                :disabled="disabled"
                :background="background"
                layout="sizes, prev, pager, next"
                :total="booksList.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :default-page-size="10"
                :default-current-page="1"
                />
            </div>
    </el-card>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';


import userBooksApi from '../../hooks/Books/userBooksApi';
import borrowApiAddFun from '../../hooks/Borrow/userAddBorrow';

import { ElLoading, ElMessage, ElMessageBox   } from 'element-plus';
import { Delete, Plus } from '@element-plus/icons-vue';

const GetApiUrl = '/books/getBooksClassIfy'

const GetBooksUrl = '/books/getBooks'

const AddBooksUrl = '/books/recordBooks'


interface limitBooksList {
    list: any,
    pageNumber: number,
    pageSize: number,
    total: number
}

interface limitList {
    list: any
}


const booksList = reactive<limitBooksList>({
    list: [],
    pageNumber: 1, // 页码
    pageSize: 10, // 每页显示
    total: 0
})

const tagList = reactive<limitList>({
    list: []
})

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    booksList.pageSize = val;
    getAllBooksFun();
}
const handleCurrentChange = (val: number) => {
    booksList.pageNumber = val;
    getAllBooksFun();
}



const getAllBooksFun = async () => {
    const loading = ElLoading.service({
          lock: true,
          text: "Loading",
          fullscreen: false,
          background: "rgba(0, 0, 0, 0.7)",
      });
    try {
        const res:any = await userBooksApi(GetBooksUrl,booksList);
        console.log(res)
        if (res.data.status !== 200) return ElMessage.error(res.data.message);
        booksList.list = res.data.data;
        booksList.total = res.data.total;
    } catch (e: any) {
        console.log(e)
        return ElMessage.error('获取失败');
    } finally {
        loading.close();
    }
}


const delTagFun = (id: string) => {
    ElMessageBox.confirm(
    '你真的借阅这本书吗?',
    '借阅',
    {
      confirmButtonText: '是的',
      cancelButtonText: '不是',
      type: 'warning',
    }
  )
    .then(async () => {
      const loading = ElLoading.service({
          lock: true,
          text: "Loading",
          fullscreen: false,
          background: "rgba(0, 0, 0, 0.7)",
      });
        try {
            const res:any = await borrowApiAddFun(AddBooksUrl + `/${id}`);
            console.log(res)
            if (res.data.status !== 200) return ElMessage.error(res.data.message);
            ElMessage.success('借阅成功');
            getAllBooksFun();
        } catch (e: any) {
            return ElMessage.error('借阅失败');
        } finally {
            loading.close();
        }
        })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消了借阅',
      })
    })  
}

const addTagFun = () => {

}

getAllBooksFun()

</script>
<style lang="scss" scoped>
@import './Borrow.scss'
</style>